<template>
  <div class="con">
    <div>
      <div class="name">
        <div>盾构商城</div>
        <div>TBM Mall</div>
      </div>
      <div class="cassinput">
        <div class="shou">
          <el-autocomplete v-model="input1"
                           ref="mark"
                           :fetch-suggestions="querySearchAsync"
                           @keyup.enter.native="inputclick2"
                           @select="handleSelect"
                           :placeholder="select=='0'?'请输入商品名称':'请输入店铺名称'">
            <el-select v-model="select"
                       slot="prepend"
                       @change='change'
                       placeholder="请选择">
              <el-option label="商品"
                         value="0"></el-option>
              <el-option label="店铺"
                         value="1"></el-option>
            </el-select>
            <div class="shou1 el-icon-search"
                 slot="append"
                 @click="inputclick2"></div>
          </el-autocomplete>
        </div>
        <div class="ul">
          <div v-for="(item, index) in list"
               :key="index"
               @click="inputclick1(item.name)">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="fabu"
           @click="linkRelease">发布需求</div>
      <div class="car"
           @click="tocart">
        <span>我的购物车</span>
        <img src="@/assets/img/car.png"
             alt="购物车" />
        <el-badge class="mark"
                  :value="this.$store.getters.cartsum" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  // props: {
  //   list: {
  //     type: Array,
  //     default() {
  //       return [];
  //     }
  //   }
  // },
  data() {
    return {
      input1: "",
      list: [],
      select: '0'
    };
  },
  //注册组件
  components: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    localStorage.getItem('userId') ? this.getCountCart(localStorage.getItem('userId')) : console.log('没有登录')
    this.getGoodsSearch()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() { },
  //计算属性
  computed: {},
  //方法
  methods: {
    async querySearchAsync(queryString, callback) {
      var list = [{}];
      if (this.input1) {
        if (this.select == '0') {
          let response = await this.$postRequest('/api/goods/findGoods', { name: this.input1, pageNum: 1, pageSize: 9, userId: localStorage.getItem('userId') })
          console.log(response)
          for (let i of response.data.list) {
            i.value = i.name;  //将想要展示的数据作为value
          }
          list = response.data.list;
        } else {
          let response = await this.$postRequest('/api/goods/searchShop', { name: this.input1, pageNum: 1, pageSize: 9, userId: localStorage.getItem('userId') })
          console.log(response)
          for (let i of response.data) {
            console.log(i)
            i.value = i.name;  //将想要展示的数据作为value
          }
          list = response.data;
        }
      }
      console.log('list', list)
      callback(list);
    },
    handleSelect(item) {
      // console.log(item);
      // if (this.select == '0') {
      this.inputclick(item.name, this.select)
      // } else {
      //   this.inputclick3(item.name)
      // }
    },
    inputclick1(name) {
      this.input1 = name
      this.$refs.mark.focus()
    },
    inputclick2() {
      this.inputclick(this.input1,this.select)
    },
    // 跳转店铺详情
    // inputclick3(id) {
    //   this.$router.push({
    //     path: '/home/business',
    //     query: {
    //       id
    //     }
    //   })
    // },
    inputclick(name, select) {
      if(name.length>0){
        this.$router.push({
          path: '/home/search',
          query: {
            name, select
          }
        })
      }
    },
    // 查询购物车数量
    async getCountCart(e) {
      let res = await this.$postRequest('/api/memberCart/getCountCart', { userId: e })
      console.log(res)
      if (res.code == 0) {
        this.$store.commit("setcart", res.data);
      } else {
        this.$message.error(res.msg)
      }
    },
    // 热搜词
    async getGoodsSearch(e) {
      // if (this.select == '1') {
      let res = await this.$postRequest('/api/goods/getGoodsSearch', { status: this.select })
      console.log('热搜词', res)
      this.list = res.data
    },
    linkRelease() {
      if (localStorage.getItem('userId')) {
        this.$router.push({ name: 'release' })
      } else {
        this.$router.push({ name: 'loginindex' })
      }
    },
    tocart() {
      if (localStorage.getItem('userId')) {
        this.$router.push({ name: 'cart' })
      } else {
        this.$router.push({ name: 'loginindex' })
      }
    },
    change(e) {
      console.log('change')
      this.getGoodsSearch()
    }
  }
};
</script>
<style scoped lang="scss">
.con {
  width: 100%;
  height: 120px;
  background: #fff;
  position: relative;
  z-index: 10;

  box-shadow: 0px 2px 14px 1px rgba(133, 133, 133, 0.15);
  & > div {
    height: 100%;
    width: 1400px;
    margin: auto;
    display: flex;
    align-items: center;
    .name {
      margin-right: 88px;
      margin-left: 58px;
      & > div:nth-child(1) {
        height: 30px;
        font-size: 30px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #000000;
        line-height: 30px;
      }
      & > div:nth-child(2) {
        height: 14px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        line-height: 18px;
        margin-top: 9px;
        text-align: center;
      }
    }
    .cassinput {
      // display: flex;
      // align-items: center;
      .shou {
        width: 730px;
        height: 50px;
        display: flex;
        /deep/ .el-autocomplete {
          width: 100%;
          .el-input-group__prepend .el-input {
            font-size: inherit;
            width: 100px;
          }
          .el-input-group__prepend {
            margin-right: 56px;
          }
        }
        /deep/ .el-input-group {
          align-items: center;
          line-height: normal;
          display: flex;
          justify-content: center;
          width: 100%;
          border-collapse: separate;
          border-spacing: 0;
        }
        /deep/ .el-input__inner {
          // width: 670px;
          height: 50px;
          background: #ffffff;
          border: 1px solid #1a69e0;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          border-radius: 4px 0 0 4px;
        }
        /deep/ .el-icon-search:before {
          line-height: 50px;
          // margin-left: 20px;
          color: #ffffff;
        }
        /deep/ .el-input-group__append {
          width: 60px;
          height: 50px;
          background: #1a69e0;
          border: 1px solid #1a69e0;
          font-size: 20px;
          cursor: pointer;
          .shou1 {
            & :active {
              background-color: rgba(26, 105, 224, 0.8);
            }
          }
        }
      }
      .ul {
        display: flex;
        height: 14px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #757575;
        margin-top: 14px;
        div {
          margin-right: 35px;
          cursor: pointer;
          &:hover {
            color: rgba(117, 117, 117, 0.8);
          }
        }
      }
    }
    .fabu {
      width: 150px;
      height: 50px;
      background-color: rgba(26, 105, 224, 0.05);
      border: 1px solid #1a69e0;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1a69e0;
      margin: 0 11px 28px 20px;
      cursor: pointer;
      &:hover {
        opacity: 0.8;
      }
    }
    .car {
      width: 180px;
      height: 50px;
      background: #ffffff;
      border: 1px solid #eeeeee;
      margin-bottom: 28px;
      display: flex;
      align-items: center;
      cursor: pointer;
      &:hover {
        opacity: 0.8;
      }
      span {
        margin: 0 16px 0 10px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #505050;
      }
      img {
        width: 24px;
        height: 24px;
        margin-right: 13px;
      }
      /deep/ sup {
        top: 0;
      }
    }
  }
}
</style>